Landing Page Brief Builder

Study a design you love, make it yours, and hand Claude Design a clear brief.

No API key set

Your key stays in this browser on this computer. It is sent only to Anthropic when you analyze an image. "Update models" pulls the current list from Anthropic so the tool keeps working after new releases.

1
Upload a Design You Love
A screenshot of a website, a mockup, or any page whose look you want to study.

Drop your screenshot here

or click to browse. JPG, PNG, WebP. Large files are resized automatically.

Your reference design
2
Make It Yours
Claude filled in what it saw. Change anything. Blank fields are left out of the brief.
About your page Both briefs
Design direction Both briefs
Color and type Both briefs
Palette Click a role, then a sampled color to fill it
Sections and copy Section list in bothCopy in long brief

Check the sections you want, in this order. Copy is optional; leave it blank and Claude Design will draft placeholder text you can edit.

Guardrails Long brief
3
Your Briefs
Start with the short brief. Reach for the long one when you want more control.

Paste this into Claude Design as your first message, with your reference screenshot and photos attached. It gives direction and leaves room for Claude Design to make layout choices.

Use this when you already know your copy, or as a follow-up after the first draft when you want Claude Design to tighten things up.

Claude's read of the reference design. This is for you to study; it isn't part of either brief.

In Claude Design

  1. Start a new design and attach your reference screenshot.
  2. Attach your logo and photos. Name them in the message if you can ("hero.jpg is the couple on the dunes").
  3. Paste the short brief and send it.
  4. Look at the first version, then ask for changes one at a time. Paste sections of the long brief when you need them.